// 请求数据
import React, { Component } from 'react'
// 验证数据类型
import PropTypes from 'prop-types'
// 引入关联的actions/postActions
import { fetchPost } from '../actions/postActions'
// 引入connect 用于从ui组件生成容器组件,意思将两种组件连起来(将postActions和posts.js文件进行连接)
import { connect } from 'react-redux'
class Posts extends Component {
    /**
     * 当我们所有的数据都从reducer中取的话就可以不需要constructor
     * 如果想要获取到从reducer(postsReducer.js)中返回的数据的话就需要用到mapStateToProps()
     */
    // constructor(props) {
    //     super(props)
    //     this.state = {
    //         posts: []
    //     }
    // }
    componentDidMount() {//页面渲染完成
        // 调用connect传过来的fetchPost方法
        this.props.fetchPost()
    };
    // 模块更新,它会在Component接受到新的状态(Props)时被触发
    componentWillReceiveProps(nextProps, nextContext) {
        // console.log(nextProps);
        // console.log(nextContext);
        // 提取提交过来的值并添加到post中渲染
        if (nextProps.newPost) {
            this.props.post.unshift(nextProps.newPost)

        }
    }
    render() {
        // console.log(this.props);

        // 遍历posts 
        const postsItem = this.props.post.map(post => (
            <div key={post.id}>
                <h1>{post.title}</h1>
                <p>{post.body}</p>
            </div>
        ))
        return (
            <div>
                {postsItem}
            </div>
        )
    }
}
// 定义验证的数据类型
Posts.propTypes = {
    // 验证fetchPost必须传来的是一个函数
    fetchPost: PropTypes.func.isRequired,
    post: PropTypes.array.isRequired

}
// 用mapStateToProps 状态转化成我们的属性
/**
     *  state.posts为在reducers/index.js中定义的
     * state.posts.posts为reducers/postsReducer.js中定义的
     */

const mapStateToProps = state => ({
    post: state.posts.items,
    // 获取提交的值
    newPost: state.posts.item
})

// 使用connect连接这样才能用到reducer
export default connect(mapStateToProps, { fetchPost })(Posts);